import '@antv/x6-vue-shape'
import { Addon } from '@antv/x6'

// 拖拽生成四边形或者圆形
export const startDragToGraph = (graph, type, e, text, color) => {
  const dnd = new Addon.Dnd({ target: graph })
  switch (type) {
    case 'Circle':
      // 圆形
      dnd.start(graph.createNode(circleCall(graph, type, e, text, color)), e)
      break
    case 'Polygon':
      // 菱形
      dnd.start(graph.createNode(polygonCall(graph, type, e, text, color)), e)
      break
    default:
      // 矩形
      dnd.start(graph.createNode(rectCall(graph, type, e, text, color)), e)
  }
}

// 矩形
export function rectCall(graph, type, e, text, color) {
  return {
    width: 100,
    height: 38,
    attrs: {
      label: {
        text: text,
        fill: '#000000',
        fontSize: 14,
        textWrap: {
          width: -10,
          height: -10,
          ellipsis: true
        }
      },
      body: {
        stroke: color === '#ffffff00' ? '#000000' : color,
        strokeWidth: 1,
        fill: color
      },
      formSubmit: {
      }
    },
    ports: ports
  }
}

// 圆形
export function circleCall() {
  return {
    shape: 'ellipse',
    width: 100,
    height: 100,
    attrs: {
      label: {
        text: '圆形节点',
        fill: '#000000',
        fontSize: 14,
        textWrap: {
          width: -20,
          height: -10,
          ellipsis: true
        }
      },
      body: {
        stroke: '#000000',
        strokeWidth: 1,
        fill: '#ffffff'
      }
    },
    ports: ports
  }
}

// 菱形
export function polygonCall() {
  return {
    shape: 'polygon',
    x: 40,
    y: 40,
    width: 120,
    height: 120,
    attrs: {
      label: {
        text: '条件节点',
        fill: '#000000',
        fontSize: 14,
        textWrap: {
          width: -50,
          height: '70%',
          ellipsis: true
        }
      },
      body: {
        fill: '#ffffff',
        stroke: '#000000',
        refPoints: '0,10 10,0 20,10 10,20',
        strokeWidth: 1
      }
    },
    ports: ports
  }
}

const ports = {
    groups: {
      // 输入链接桩群组定义
      top: {
        position: 'top',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#2D8CF0',
            strokeWidth: 2,
            fill: '#fff'
          }
        }
      },
      // 输出链接桩群组定义
      bottom: {
        position: 'bottom',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#2D8CF0',
            strokeWidth: 2,
            fill: '#fff'
          }
        }
      },
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#2D8CF0',
            strokeWidth: 2,
            fill: '#fff'
          }
        }
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#2D8CF0',
            strokeWidth: 2,
            fill: '#fff'
          }
        }
      }
    },
    items: [
      {
        id: 'port1',
        group: 'top'
      },
      {
        id: 'port2',
        group: 'bottom'
      },
      {
        id: 'port3',
        group: 'left'
      },
      {
        id: 'port4',
        group: 'right'
      }
    ]
}
